import 'package:flutter/material.dart';

class LayoutPage extends StatefulWidget {
  const LayoutPage({super.key});

  @override
  State<LayoutPage> createState() => _LayoutPageState();
}

class _LayoutPageState extends State<LayoutPage> {
  String url1 =
      'https://znas.cn/share/transcode/share/file/thumb?nid=KEYDEMBQGAZDAUSHIRNDK&dtoken=VFUoQzLIVY3OLs2ED3knGCwlCMQLAlW1fQjWPrhsxM6yCZ24TINb50WzUWH42Hzf6cGpOVEo6cdjEndZH66DWtn2tNM0q5czfaIzq8XVZQPghYtzkJhZem3dvxnlSJ2p3tDVkaDm2QetMi3VnHrgTbSgm4m4&path=E.lepyBkZQnI8GitOLJyfu7f7X9ClkNuKY2eb31XAuElKm3BG40DM88j5TRnflm3pfSZYIMhRn6Zyc5EZCQbPlUigyCBksNDvMeA2NNxRs3YXYUNjFAXbqY271tp1eUVEnIM3m3upIJZzdqKQH7Ts0YjZ0gm4m4&dest_fmt=large&request_purpose=5&device_type=h5';

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      alignment: Alignment.center,
      child: Column(
        children: [
          Row(
            children: [
              const BackButton(),
              ClipOval(
                child: SizedBox(
                    width: 100,
                    height: 100,
                    child: Image.network(fit: BoxFit.cover, url1)),
              ),
              ClipOval(
                child: Image.network(
                    fit: BoxFit.cover, url1, width: 200, height: 100),
              ),
            ],
          ),
          Row(
            children: [
              Padding(
                  padding: EdgeInsets.all(10),
                  child: ClipRRect(
                      borderRadius: const BorderRadius.all(Radius.circular(10)),
                      child: Opacity(
                        opacity: 0.6,
                        child: Image.network(
                            fit: BoxFit.cover, url1, width: 100, height: 200),
                      ))),
              Padding(
                padding: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(30)),
                  child: Image.network(
                      fit: BoxFit.cover, url1, width: 100, height: 200),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: PhysicalModel(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(100),
                  clipBehavior: Clip.antiAlias,
                  child: Image.network(
                      fit: BoxFit.cover, url1, width: 100, height: 200),
                ),
              ),
            ],
          ),
          Column(
            children: [
              Container(
                decoration: BoxDecoration(color: Colors.green),
                child: Text('BoxDecoration'),
              )
            ],
          ),
          Column(
            children: [
              FractionallySizedBox(
                widthFactor: 1,
                child: Container(
                  decoration: BoxDecoration(color: Colors.green),
                  child: Text('BoxDecoration'),
                ),
              )
            ],
          ),
          Stack(
            children: [
              Image.network(fit: BoxFit.cover, url1, width: 100, height: 200),
              Positioned(
                  left: 0,
                  bottom: 0,
                  child: Image.network(url1, width: 100, height: 100))
            ],
          ),
          Wrap(
            spacing: 8,
            runSpacing: 6,
            children: [
              _chip("IOS"),
              _chip("IOS"),
              _chip("Flutter"),
              _chip("adnroid"),
              _chip("Flutter"),
              _chip("adnroid"),
            ],
          )
        ],
      ),
    );
  }

  Chip _chip(String label) {
    return Chip(
      label: Text(label),
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text(
          label.substring(0, 1),
          style: TextStyle(fontSize: 10),
        ),
      ),
    );
  }
}
